<template>
	<div>
		<el-form label-width="120px" :model="dataForm" :rules="rules" ref="dataForm"
			@keyup.enter.native="getDataList(true)">
			<el-row>
				<el-col :span="6">
					<el-form-item label="集团:" prop="corpName">
						<el-input v-model="dataForm.corpName" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="项目:" prop="projectName">
						<el-input v-model="dataForm.projectName" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="投保人:" prop="policyholderName">
						<el-input v-model="dataForm.policyholderName" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="时间段:" prop="reportTime">
					  <el-date-picker
						v-model="dataForm.reportTime"
						type="daterange"
						value-format="yyyy-MM-dd"
						:picker-options="reportTimeOption"
								  :clearable="false"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						style="max-width: 238px"
					  >
					  </el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="总保费(元):" prop="totalPremium">
						<el-input v-model="dataForm.totalPremium" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="满期保费(元):" prop="totalPremiumPaid">
						<el-input v-model="dataForm.totalPremiumPaid" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-button @click="resetForm('dataForm')">重置条件</el-button>
						<el-button v-if="isAuth('claim:claimcase:pageList')" type="primary"
							@click="getDataList(true)">查询</el-button>
						<!-- <el-button type="primary" @click="goCaseDetail()">记录详情</el-button> -->
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-table class="tableClass" :data="dataList" border v-loading="dataListLoading" style="width: 100%">
			<el-table-column type="index" label="序号" width="50"> </el-table-column>
			<el-table-column prop="typeName" header-align="center" align="center" label="身故类型"></el-table-column>
			<el-table-column prop="count" header-align="center" align="center" label="数量"></el-table-column>
			<el-table-column prop="totalAmount" header-align="center" align="center" label="理赔总金额"></el-table-column>
			<el-table-column prop="totalEstimatedLoss" header-align="center" align="center"
				label="估损总金额"></el-table-column>
			<el-table-column prop="totalPremium" header-align="center" align="center" label="总保费"></el-table-column>
			<el-table-column prop="totalPremiumPaid" header-align="center" align="center"
				label="满期保费"></el-table-column>
			<el-table-column prop="singleRatio" header-align="center" align="center" label="简单赔付率" :formatter="formatRatio"></el-table-column>
			<el-table-column prop="allRatio" header-align="center" align="center" label="满期赔付率" :formatter="formatRatio"></el-table-column>
		</el-table>
		<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
			:current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
	</div>
</template>

<script>
	import { isIdCard, isBirthCard, isMoney, isMobile } from "@/utils/validate";
	import Vue from 'vue'
	export default {
		data() {
			var validateMoney = (rule, value, callback) => {
				if (!value) {
					callback()
				}
				if (!isMoney(value)) {
					callback(new Error("金额格式错误(仅可保留两位小数)"));
				} else {
					callback();
				}
			};
			return {
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataList: [],
				yearList: [],
				dataListLoading: false,
				dataForm: {
					corpName: "",
					projectName: "",
					policyholderName: "",
					year: "",
					totalPremium: null,
					totalPremiumPaid: null,
					totalAmountSettled: null,
					totalEstimatedLoss: null,
					reportTime:null,
					reportTimeStart: null,
					reportTimeEnd: null,
				},
				reportTimeOption: {
				  onPick: ({ maxDate, minDate }) => {
				    this.dataForm.reportTimeStart = this.pickerDateFormat(
				      new Date(minDate)
				    );
				    this.dataForm.reportTimeEnd = this.pickerDateFormat(
				      new Date(maxDate)
				    );
				  },
				},
				rules: {
					totalPremium: [{
						validator: validateMoney,
						trigger: "blur"
					}, {
						required: true,
						message: "请输入总保费",
						trigger: "blur"
					}, ],
					totalPremiumPaid: [{
						validator: validateMoney,
						trigger: "blur"
					}, {
						required: true,
						message: "请输入满期保费",
						trigger: "blur"
					}, ],
				}
			};
		},
		components: {},
		activated() {
		},
		methods: {
			// 获取数据列表
			getDataList() {
				this.$refs["dataForm"].validate((valid) => {
					if (valid) {
						this.dataListLoading = true;
						console.log("paramData==>", this.dataForm);
						this.$http({
							url: this.$http.adornUrl("/claim/report/queryAccidentTypeRatio"),
							method: "POST",
							data: this.$http.adornData({
								page: this.pageIndex,
								pageSize: this.pageSize,
								params: this.dataForm,
							}),
						}).then(({
							data
						}) => {
							this.dataListLoading = false;
							if (data && data.code === 0) {
								this.dataList = data.data.records;
								this.totalPage = data.data.total;
							} else {
								if (data && data.msg) {
									this.$message.warning(data.msg);
								}
								this.dataList = [];
								this.totalPage = 0;
							}
						});
					}
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.dataForm.reportTimeStart=null
				this.dataForm.reportTimeEnd=null
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val;
				this.pageIndex = 1;
				this.getDataList(true);
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageIndex = val;
				this.getDataList(true);
			},
			initYearList() {
				const currentDate = new Date();
				// 从当前日期中获取年份
				const currentYear = currentDate.getFullYear();
				// 创建一个有序的列表来存储年份
				this.yearList = [];
				// 按照从小到大的顺序添加当前年份及往前推3年的年份到列表中
				for (let i = 3; i >= 0; i--) {
					let obj = {}
					obj.value = currentYear - i
					obj.label = currentYear - i
					this.yearList.push(currentYear - i);
				}
				this.dataForm.year = currentYear
			},
			formatRatio(row, column, cellValue, index) {
			  return null != cellValue ? `${cellValue*100}%` : '';
			},
			pickerDateFormat: function (date) {
			  let d = new Date(date),
			    month = "" + (d.getMonth() + 1),
			    day = "" + d.getDate(),
			    year = d.getFullYear();
			
			  if (month.length < 2) month = "0" + month;
			  if (day.length < 2) day = "0" + day;
			  return [year, month, day].join("-");
			},
		},
	};
</script>

<style>
	.tableClass {
		margin-top: 15px;
	}
</style>